import React from 'react'
import styleIndex from './style.index'
import { Loading, Select, Link, TitleBar } from '../../ui-components'
import { connect } from 'react-redux'
import style from './style.objective'
import util from '../../util'
import cx from 'classnames'

export default
@connect(({ app, user, okr }) => ({ app, user, okr }))
class UserIndex extends React.Component {

	state = {
		period: ''
	}

	componentWillReceiveProps(props) {
		if (props.params.userId != this.props.params.userId) {
			// 清空okr
			this.props.resetOkr()
			this.fetchPeriod()
		}

		if (util.isNull(this.props.okr.period) && !util.isNull(props.okr.period)) {
			this.fetchObjective(props)
		}
	}

	componentWillUnmount() {
		this.props.resetOkr()
	}

	fetchPeriod(props) {
		this.props.fetchPeriod({ type: 3, userId: this.props.getUserId(props) })
	}

	fetchObjective(props, periodId) {
		if (util.isNull(props.okr.period.objectivePeriods)) return
    this.props.fetchObjective(periodId || this.getCurPeriod(props.okr.period.objectivePeriods))
	}

	componentDidMount() {
		this.fetchPeriod()
	}

	changePeriod(e) {
		this.setState({
			period: e.target.value
		})
		this.fetchObjective(this.props, e.target.value)
	}

	renderItem(v, i) {
		return (
			<li 
				className={cx({
					[style.item]: true,
					[style.objective]: !v.keyResultId
				})}
				key={i}
			>
				<span>
					<h3>
						<label>{ v.content }</label>
            <span 
              className={style.directorList}
              style={util.isNull(v.directorList)? {
                backgroundColor: '#fff'
              }: {}}
            >
              {
                util.isNull(v.directorList)? '未指派': v.directorList.map((v,i) => v.coreUserProfileVO.fullName).join('，') 
              }
            </span>
					</h3>
					<span className={style['item-process']}>
            <span style={{ color: '#8aa4c0', fontSize: '12px', marginRight: '10px' }}>进度</span>
						<Loading value={v.process*100}/>
            <span className={style['item-process-value']}>{v.process* 100}%</span>
            <span className={style.priority}>优先级<span>{`P${v.priority}`}</span></span>
					</span>
				</span>
				{
					v.keyResultList && (v.keyResultList.length? (
						<ul>
							{
								v.keyResultList.map(::this.renderItem)
							}
						</ul>
					): null)
				}
			</li>
		)
	}

	renderObjective() {
		const { objective } = this.props.okr
    const { objectivePeriods } = this.props.okr.period
		const { objectiveVOList, totalProcess } = objective
		return (
			<div className={style.objectives}>
				<div>
					<h2>
						<label>个人目标</label>
						{
              (objectiveVOList && objectiveVOList.length)?
                (
                  <span className={style.totalProcess}>已完成{ util.formatFloat(totalProcess* 100) }%</span>
                )
              : null
						}
					</h2>
					<ul>
						{
              (objectiveVOList && objectiveVOList.length)?
							  objectiveVOList.map(::this.renderItem)
              : null
						}
						{
               ((objectivePeriods && !objectivePeriods.length) || (objectiveVOList && !objectiveVOList.length))? (
                <div style={{ width: '220px', margin: 'auto', textAlign: 'center', marginTop: '24px' }}>
                  <img width="140" height="140" src={`/${util.getImagePath()}/default/objective.png`}/>
                  <div style={{ marginTop: '20px', color: '#999', fontSize: '18px' }}>{ this.props.isSelf? ((objectivePeriods && objectivePeriods.length)? '该周期内': '您还'): '该同事' }暂未填写目标</div>
                </div>
              ): null
						}
					</ul>
				</div>
			</div>
		)
	}

  getCurPeriod(periods) {
    return util.find(periods, item => item.default).objectivePeriodId || util.last(periods).objectivePeriodId
  }

	render() {
		const { period } = this.props.okr
		const { objectivePeriods } = period
		return (
			<div className={style.root}>
				{
					(objectivePeriods && objectivePeriods.length) ?
					<Select 
						ref="select"
						value={this.state.period || this.getCurPeriod(objectivePeriods)}
						onChange={::this.changePeriod}
						className={style.periods}>
						{
							objectivePeriods.map((v, i) => (
								<option value={v.objectivePeriodId} key={i}>{ v.name }</option>
							))
						}
					</Select>: null
				}
				{
					this.renderObjective()
				}
			</div>
		)
	}
}
